<template>
  <div>
    <el-dialog v-bind="dialogProps" :before-close="handleClose" :close-on-click-modal="false"
               :destroy-on-close="true" v-dialogDrag>
      <div @click="basicsShow()" style="cursor:pointer">
        <h3 style="color:#009688;"><i :class="classFont" style="margin-right: 5px;"></i>基础信息</h3>
      </div>
      <div style="width:100%;height:2px;background:#009688;margin-bottom: 10px;"></div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm"
               size="small" :disabled="isDisabled">

        <el-row :gutter="16" justify="start" v-show="formShow">
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="单位:" prop="ssdwbm">
              <el-select v-model="ruleForm.ssdwbm" placeholder="请选择单位" clearable style="width: 100%"
                         @change="onchange_gldw">
                <el-option v-for="item in zxoptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="入库单号:" prop="id">
              <el-input v-model="ruleForm.id" placeholder="请输入入库单号" clearable disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="库房名称:" prop="ckbm">
              <el-select v-model="ruleForm.ckbm" placeholder="请选择库房名称" clearable style="width: 100%"
                         @change="onchange_sskf">
                <el-option v-for="item in sskfOptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="入库日期:" prop="djrq">
              <el-date-picker type="date" v-model="ruleForm.djrq" style="width:100%" clearable
                              placeholder="请选择入库日期" :picker-options="expireTimeOPtion" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="入库操作人:" prop="cjr">
              <el-input v-model="ruleForm.cjr" placeholder="请输入入库操作人" clearable disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="操作时间:" prop="cjTime">
              <el-date-picker v-model="ruleForm.cjTime" type="datetime" style="width:100%" clearable
                              placeholder="请选择操作时间" disabled>
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>
      <div v-if="isEdit">
        <div style="cursor:pointer">
          <h3 style="color:#009688;"><i :class="classFont" style="margin-right: 5px;"></i>审核信息</h3>
        </div>
        <div style="width:100%;height:2px;background:#009688;margin-bottom: 10px;"></div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm"
                 size="small" :disabled="!isEdit">

          <el-row :gutter="16" justify="start" v-show="formShow">
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="审核结论:">
                <el-input v-model="ruleForm.shjlmc" placeholder="请输入选择审核结论" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="审核人:">
                <el-input v-model="ruleForm.shPerson" placeholder="请输入审核人" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
              <el-form-item label="审核时间:">
                <el-date-picker v-model="ruleForm.shTime" type="datetime" style="width:100%" clearable
                                placeholder="请选择审核时间" value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="审核意见:">
                <el-input v-model="ruleForm.shyj" placeholder="请输入审核意见" type="textarea" :rows="3" clearable
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>
      <div>
        <h3 style="color:#009688;">设备信息</h3>
      </div>
      <div style="width:100%;height:2px;background:#009688;margin-bottom: 10px;"></div>
      <div v-if="!isDisabled" style="margin-bottom: 10px;">
        <el-button type="primary" icon="fa fa-plus (alias)" @click="equipmentModel()">选择设备</el-button>
        <el-button icon="fa fa-times (alias)" @click="clearAll()">删除</el-button>
      </div>
      <vxe-table border stripe ref="selectedEquip" height="400" :data="list.data">
        <vxe-column type="seq" title="序号" width="60" align="center"></vxe-column>
        <vxe-column v-if="!isDisabled" type="checkbox" width="60" align="center"></vxe-column>
        <vxe-column field="sbmc" title="设备名称" align="center" minWidth="150"></vxe-column>
        <vxe-column field="ccbm" align="center" title="出厂编码" minWidth="150">
          <template v-slot="{ row }">
            <span style="color:#0000FF;cursor: pointer;" @click="handleEquip(row)">{{ row.ccbm }}</span>
          </template>
        </vxe-column>
        <vxe-column field="sblxmc" title="设备类型" align="center" minWidth="150"></vxe-column>
        <vxe-column field="pt" title="PT" align="center" minWidth="80"></vxe-column>
        <vxe-column field="ct" title="CT" align="center" minWidth="80"></vxe-column>
        <vxe-column field="sbgg" title="规格" align="center" minWidth="80"></vxe-column>
        <vxe-column field="xh" title="型号" align="center" minWidth="80"></vxe-column>
        <vxe-column field="cjmc" title="厂家" align="center" minWidth="80"></vxe-column>
      </vxe-table>
      <span slot="footer" class="dialog-footer" v-if="footerVisible">
                <el-button v-if="!isDisabled" @click="handleCancel()" :size="size"
                           icon="fa fa-minus-square-o">取消</el-button>
                <el-button v-if="isEdit" type="primary" @click="handleSubmit()" :size="size"
                           icon="fa fa-save (alias)">确定</el-button>
                <el-button type="primary" @click="handleCancel()" :size="size"
                           icon="fa fa-save (alias)">关闭</el-button>
            </span>
    </el-dialog>
    <selectEquipment ref="selectEquipment" @onSelectStations="onSelectStations"></selectEquipment>
    <equipmentMaintenanceForm ref="equipmentMaintenanceForm"></equipmentMaintenanceForm>
  </div>
</template>
<script>
import {godownEntryFrom} from "../model/godownEntryFrom";
import selectEquipment from "./selectEquipment";
import equipmentMaintenanceForm from './equipmentMaintenanceForm.vue'
import {godownEntryApi} from "@/api/equip/godownEntryApi";
import {warehouseManagement} from '@/api/equip/warehouseManagement.js'
import {getInfo} from "@/api/login";
import {listDept} from "@/api/system/dept";
import moment from "moment";

export default {
  components: {selectEquipment, equipmentMaintenanceForm},
  data() {
    return {
      dialogProps: {
        visible: false,
        title: "新增",
        width: "70%",
        top: "5px",
      },
      footerVisible: true,
      size: "medium",
      ruleForm: godownEntryFrom.FormData,
      rules: godownEntryFrom.rules,
      disabledForm: true,
      zxoptions: [],
      sskfOptions: [],
      xsnrShow: true,
      list: {
        data: []
      },
      row: {},
      classFont: 'fa fa-caret-down',
      formShow: true,
      isEdit: false,
      isDisabled: false,
      expireTimeOPtion: {
        // disabledDate(time) {
        //     return time.getTime() < Date.now()-8.64e7 //如果没有后面的-8.64e7就是不可以选择今天的
        // },
      },
    };
  },
  mounted() {

  },
  methods: {
    clearAll() {
      const rowArr = this.$refs.selectedEquip.getCheckboxRecords(true)
      this.list.data = this.list.data.filter(items => {
        if (!rowArr.includes(items)) return items;
      })
    },
    onSelectStations(data) {
      this.list.data = data
    },
    showDialog(isEdit, row, isDisabled) {
      console.log(isEdit, row, isDisabled, 1111);
      if (isEdit) {
        this.initData(row);
        this.isEdit = true
        this.dialogProps.title = '编辑入库单'
        this.isDisabled = isDisabled
      } else {
        if (isDisabled) {
          this.isDisabled = isDisabled
          this.initData(row);
          this.dialogProps.title = '入库单详情'
        } else {
          this.ruleForm = {
            id: '',
            djrq: '',//出入库时间根据type区分
            xsmc: '',
            jhkssj: '',//计划开始时间
            jhjssj: '',//计划结束时间
            ckmc: '',//仓库名称
            ssdwbm: '',//所属单位
            ssdwmc: '',
            ckbm: '',
            type: '0',
            cjTime: '',//创建时间
            cjr: "",//创建人
            equipList: []
          }
          this.getDjbhfunction()
          this.list.data = []
          this.dialogProps.title = '创建入库单'
          getInfo().then(res => {
            this.ruleForm.cjr = res.user.nickName
            this.ruleForm.cjrbm = res.user.userId
            this.ruleForm.cjTime = moment().format("YYYY-MM-DD HH:mm:ss")
          })
          this.isDisabled = false
        }
      }
      this.dialogProps.visible = true;
      this.getOptionData_gldw()
    },
    basicsShow() {

      if (this.formShow) {
        this.formShow = false
        this.classFont = 'fa fa-caret-right'

      } else {
        this.formShow = true
        this.classFont = 'fa fa-caret-down'

      }

    },

    //选择设备弹窗
    equipmentModel() {
      this.$refs.selectEquipment.showDialog(this.list.data, this.ruleForm)
    },
    handleEquip(val) {
      this.$refs.equipmentMaintenanceForm.showDialog(false, val, true)
    },

    //编辑渲染
    initData(data) {
      godownEntryApi.getDjData(data.id).then(res => {
        this.ruleForm = res.data[0]
        warehouseManagement.getKfByGldw(res.data[0].ssdwbm).then(res => {
          this.sskfOptions = []
          res.data.forEach((item) => {
            this.sskfOptions.push({
              label: item.kfName, value: item.id
            })
          })
        }).catch(err => {
        })
      })
      let queryParams = {
        column: '',
        entity: {
          id: data.id
        },
        order: '',
        pageNo: 1,
        pageSize: 10,
        paramsMap: {}
      }
      godownEntryApi.getDjEquipList(queryParams).then(res => {
        this.list.data = res.data.records
      })
    },
    timeformat(dat, value, type) {
      let year = dat.getFullYear();
      let mon = dat.getMonth() + 1 < 10 ? "0" + (dat.getMonth() + 1) : dat.getMonth() + 1;
      let data = dat.getDate() < 10 ? "0" + (dat.getDate()) : dat.getDate();
      var newDate = year + "-" + mon + "-" + data + " " + '00' + ":" + '00' + ":" + '00';
      return newDate;
    },
    //确定
    handleSubmit() {
      //    this.ruleForm.djrq = this.timeformat(this.ruleForm.djrq)
      console.log(this.$refs.ruleForm.validate)
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.ruleForm.equipList = this.list.data
          if (!this.isEdit) {
            godownEntryApi.insert(this.ruleForm).then(res => {
              this.dialogProps.visible = false;
              this.$emit("closeEvent");
            })
          } else {
            console.log(this.ruleForm);
            godownEntryApi.update(this.ruleForm).then(res => {
              this.dialogProps.visible = false;
              this.$emit("closeEvent");
            })
          }
        } else {
          return false;
        }
      });
    },
    getDjbhfunction() {
      godownEntryApi.getDjbh().then(res => {
        console.log(res)
        if (res.code === '200') {
          this.$nextTick(() => {
            this.ruleForm.id = res.message
          })
        }
      })
    },
    //取消
    handleCancel() {
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields()
      }
      // for (const k in this.form.data) {
      //   this.form.data[k] = ''
      // }
      this.list = {
        data: [],
      }
      this.row = {}
      this.sskfOptions = []
      this.dialogProps.visible = false;
    },
    //确定关闭
    handleClose(done) {
      this.handleCancel()
      this.dialogProps.visible = false;
    },
    getOptionData_gldw() {//获取管理单位：字典表
      getInfo().then(res => {
        let params = {
          deptId: res.user.dept.deptId,
          parentId: res.user.dept.parentId
        }
        listDept(params).then(res => {
          let optionList = [
            {label: '请选择', value: ''}
          ]
          res.data.forEach((item) => {
            optionList.push({label: item.deptName, value: item.deptId})
          })
          this.zxoptions = optionList
        })
      })
    },
    onchange_gldw(val) {
      this.sskfOptions = []
      this.ruleForm.ckbm = ''
      this.list.data = []
      this.ruleForm.ssdwmc = ''
      if (val) {
        let arr = this.zxoptions.filter(item => {
          return item.value == val;
        })
        if (arr && arr.length > 0) {
          this.ruleForm.ssdwmc = arr[0].label;
        }
        warehouseManagement.getKfByGldw(val).then(res => {

          res.data.forEach((item) => {
            this.sskfOptions.push({
              label: item.kfName, value: item.id
            })
          })
        }).catch(err => {
        })
      }
    },
    onchange_sskf(val) {
      this.list.data = []
      this.ruleForm.ckmc = ''
      if (val) {
        let arr = this.sskfOptions.filter(item => {
          return item.value == val;
        })
        if (arr && arr.length > 0) {
          this.ruleForm.ckmc = arr[0].label;
        }
      }
    },
  },
};
// 创建一个简单的超链接渲染

</script>
<style>
.el-dialog__footer {
  width: 100%;
  border-top: 1px solid #e8e8e8;
}
</style>
